<template>
  <view>
    <view class="shop_list_wrap">
      <view class="shops_box_item_new" v-for="(goods,index) in shopList" :key="index" @click="OpenDetails(goods,index)">
<!--        商家标题-->
        <view class="shop_top" v-if="!isShop">
          <view>
            <image src="/static/images/shop.png" style="height: 38rpx;width: 38rpx"></image>
          </view>
          <view class="text">
            {{ goods.shop_name }}
          </view>
          <view style="color: #888888;font-size: 24rpx">
            距离{{ goods.distance }}km
          </view>
        </view>
        <view style="height: 1px;background-color: #888888;opacity: .1;margin-bottom: 20rpx" v-if="!isShop"></view>
<!--        商家列表内容-->
        <view class="shops_box_item u-flex">
          <view class="left_goods">

            <view style="position: relative">
              <view v-if="(goods.stock - goods.daily_sales_num) <=0"
                  class="goods_tu" style="background-color: #00000090;position: absolute;top: 0;left: 0;display: flex;align-items: center;justify-content: center;">
                <image class="goods_tu1" :src="BestImgUrlBwc + 'home/ysq.png'"></image>
              </view>
              <image class="goods_tu" :src="goods.logo"></image>
            </view>
            <view class="jdt u-flex">
              <view class="jft_box">
                <u-line-progress :isHuo="true" :isicon="BestImgUrl + '/index/Group-34813.png'" active-color="#FA682C"
                                 inactive-color="#FFF1E3" height="18" :show-percent="false" :striped="true"
                                 :percent="((goods.stock - goods.daily_sales_num)/goods.stock)*100" :striped-active="true">
                </u-line-progress>
              </view>
              <text class="synum">剩{{ (goods.stock - goods.daily_sales_num) <=0 ? 0 : (goods.stock - goods.daily_sales_num) }}份</text>
            </view>
          </view>
          <view class="right_goods_info">
            <view class="shop_name">{{ goods.name }}</view>
            <view v-if="goods.platform_type === 0" class="shop_addres u-flex" style="height: 48rpx;line-height: 48rpx;color: #9C9C9C">
              <view class="shop_require ellipsis-one-line">{{"探店要求：小红书粉丝数≥" + goods.fans_num + "大众点评等级≥" + goods.level}}</view>
              <!--<u-icon name="arrow-right" style="margin-left: 10rpx;height: 16rpx;width: 16rpx;margin-top: 2rpx"></u-icon>-->
            </view>
            <view v-else  class="shop_addres u-flex" style="height: 48rpx;line-height: 48rpx;color: #9C9C9C">
              <view class="shop_require ellipsis-one-line">{{ goods.platform_type === 3 ? "探店要求：大众点评等级≥" + goods.level : "探店要求：小红书粉丝数≥" + goods.fans_num }}</view>
              <!--<u-icon name="arrow-right" style="margin-left: 10rpx;height: 16rpx;width: 16rpx;margin-top: 2rpx"></u-icon>-->
            </view>

            <view style="width: 460rpx;;height:126rpx;position: relative;z-index: 2">
              <image :src="BestImgUrlBwc + 'home/order_price.png'"
                     style="width: 460rpx;height: 126rpx;top: 0;right: 0;position: absolute"></image>
              <view style="position: relative;text-align: center;padding-top: 10rpx;color: white;font-size: 24rpx">
                <view>￥{{ toFixedTwo(goods.rebate_amount) }}</view>
                <view>返利</view>
              </view>
              <view style="display: flex">
                <view style="color: #FF9746;margin-top: -16rpx;font-size: 22rpx">
                  原价￥{{ goods.price }}
                </view>
                <view style="flex: 1"></view>
                <view style="color: #FF9746;margin-top: -16rpx;font-size: 22rpx">
                  原价￥{{ goods.price }}
                </view>
              </view>
            </view>
            <view
                style="width: 460rpx;margin-top:-15rpx;position: relative;height: 80rpx;border-radius:66rpx;z-index: 1"
                :style="{ 'background-color': (goods.stock - goods.daily_sales_num) <=0 ? '#f2f2f2' : '#FFF0E5' }">
              <view style="width: 460rpx;position: absolute;">
                <image v-if="(goods.stock - goods.daily_sales_num) > 0" :src="BestImgUrlBwc + 'home/order_qd.png'"
                       style="width: 176rpx;height: 80rpx;top: 0;right: 0;position: absolute"></image>
                <image v-else :src="BestImgUrlBwc + 'home/order_sq.png'"
                       style="width: 176rpx;height: 80rpx;top: 0;right: 0;position: absolute"></image>
                <!--               <image :src="BestImgUrlBwc + 'home/order_yy.png'" style="width: 176rpx;height: 80rpx;top: 0;right: 0;position: absolute"></image>-->
                <!--               <image :src="BestImgUrlBwc + 'home/order_yyy.png'" style="width: 202rpx;height: 80rpx;top: 0;right: 0;position: absolute"></image>-->
              </view>
              <view
                  style="position: relative;z-index: 3;margin-left: 30rpx;height: 80rpx;line-height: 80rpx;font-size: 26rpx"
                  :style="{ 'color': (goods.stock - goods.daily_sales_num) <= 0 ? '#c9c9c9' : '#FF5F15' }">
                探店价:￥
                <text style="font-size: 39rpx">{{ toFixedTwo(goods.price - goods.rebate_amount) }}</text>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>
    <!--笔记要求弹窗-->
    <u-popup v-model="showAsk" mode="bottom" width="750" border-radius="20" :closeable="true"
             :mask-close-able="true">
      <view style="padding: 30rpx;background: white" v-if="order_item">
        <view class="guanyu_title">笔记要求</view>

        <view style="height: 20rpx"></view>
        <u-line></u-line>
        <view style="height: 20rpx"></view>
        <view style="text-align: start">
          <view style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold">在到店体验完成后，按照以下要求发布一篇笔记即可获得
            <text style="color:#FF7800;">{{ order_item.rebate_amount }}</text>
            元现金~
          </view>
          <view
              style="font-size: 26rpx;margin-top: 20rpx;color: #FF7800;background-color: #FFF8E8;padding: 20rpx;border-radius: 20rpx">
            Tips:图片是重点!可参考领食周边购实拍和探友晒图哦~
          </view>
          <view style="font-size: 26rpx;margin-top: 20rpx;;font-weight: bold">笔记平台:
            <text v-if="order_item.platform_type==1">小红书笔记</text>
            <text v-if="order_item.platform_type==2">抖音笔记</text>
            <text v-if="order_item.platform_type==3">大众点评笔记</text>
            <text v-if="order_item.platform_type==4">美团笔记</text>
          </view>
          <view style="font-size: 26rpx;margin-top: 20rpx;font-weight: bold">笔记图片</view>
          <view style="font-size: 24rpx;margin-top: 10rpx;color: #666666"> {{ order_item.activity_ask }}</view>
          <view style="font-size: 26rpx;margin-top: 20rpx;">
            <view style="font-weight: bold">携带话题</view>
            <view style="height: 10rpx"></view>
            <text style="color: #FF7800">{{ order_item.package.subject }}</text>
            <text style="height: 10rpx;color: #666666">+2个热门自选话题</text>
          </view>
          <view style="font-size: 26rpx;margin-top: 20rpx;font-weight: bold">添加门店定位</view>
          <view style="font-size: 24rpx;margin-top: 10rpx;color: #FF7800" @click="Daohang()">{{
              order_item.shop.address
            }}
          </view>
        </view>

        <view style="height: 60rpx"></view>
        <view style="width: 690rpx;height: 80rpx;background: linear-gradient( 104deg, #FF7800 0%, #FF7A00 100%);
              font-size: 32rpx;color: #FFFFFF;line-height: 80rpx;text-align: center;border-radius: 60rpx"
              @click="showAsk=false">
          确定
        </view>
        <view style="height: 20rpx"></view>
      </view>
    </u-popup>
        <!--<view class="shop_list_wrap">
          <view class="shops_box_item u-flex" v-for="(goods,index) in shopList" :key="index"
                @click="OpenDetails(goods,index)">
            <view class="left_goods">
              <image class="goods_tu" :src="goods.logo"></image>
              <view class="jdt u-flex">
                <view class="jft_box">
                  <u-line-progress :isHuo="true" :isicon="BestImgUrl + '/index/Group-34813.png'" active-color="#FA682C"
                                   inactive-color="#FFF1E3" height="18" :show-percent="false" :striped="true" :percent="70"
                                   :striped-active="true">
                    &lt;!&ndash; <view slot="default">
                      <text class="synum">剩4份</text>
                    </view> &ndash;&gt;
                  </u-line-progress>
                </view>
                <text class="synum">剩{{ goods.stock }}份</text>
              </view>
            </view>
            <view class="right_goods_info">
              <view class="shop_name">{{ goods.name }}</view>
              <view class="shop_addres u-flex">
                <image :src="BestImgUrl+'/index/Frame.png'"></image>
                <text class="dz text-Omit">{{ goods.shop_name }}</text>
                <text class="mi">{{ goods.distance }}km</text>
              </view>
              <view class="tags_box u-flex">
                <u-tag :text="'V'+goods.vip_level+'参与'" mode="light" size="mini" color="#FF5168" bg-color="#FFEEF1"
                       border-color="#FF5168"/>
              </view>

              <view class="qiang_Btn u-flex">
                <view class="yj">原价¥{{ goods.price }}</view>
                <view class="price">
                  <text>¥</text>
                  <text>{{ toFixedTwo(goods.price - goods.rebate_amount) }}</text>
                  <text>探店价</text>
                </view>
                <view class="qbtn">
                  <view class="qbtn_wrap_box">
                    <view class="qbtn_wrap">
                      <view class="fanli">
                        <view><span>¥</span>{{ toFixedTwo(goods.rebate_amount) }}</view>
                        <view>返利</view>
                      </view>
                      <image :src="BestImgUrl+'/index/flj.png'" mode=""></image>
                    </view>
                  </view>
                  <view class="btn_bg_color">
                    <image class="qiangzi" :src="BestImgUrl+'/index/qiangzi.png'" mode=""></image>
                  </view>
                </view>
              </view>

            </view>
          </view>
        </view>-->

  </view>
</template>

<script>
const app = getApp();
export default {
  name: "home-shops-list",
  props: {
    shopList: {
      type: Array,
      default: []
    },
    isShop: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      BestImgUrlBwc: app.globalData.imgurlBwc,
      showAsk: false,
    };
  },
  created() {

  },
  methods: {
    toFixedTwo(val) {
      var str = Number(val).toFixed(2)
      return str;
    },
    //套餐已售完
    OpenDetails(item, index) {
      if((item.stock - item.daily_sales_num) <=0){
        uni.showToast({
          title: '该套餐已售完',
          icon: 'none',
          duration: 2000
        })
        return
      }
      uni.navigateTo({
        url: '/subpackageA/pages/PackageDetails/PackageDetails?package_id=' + item.id
      })
    },
    //探店要求弹窗
    shopRequire(res){
      this.showAsk = true;
    }
  }
}
</script>

<style lang="scss">

.shops_box_item_new {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  //box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.05);
}

.shop_top {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;

  .text {
    margin-left: 10rpx;
    margin-bottom: 3rpx;
    flex: 1;
    font-size: 28rpx;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.shop_list_wrap {
  position: relative;
  z-index: 2;
  padding: 0 24rpx;

  .shops_box_item {
    align-items: flex-start;

    .left_goods {
      width: 184rpx;

      .goods_tu {
        width: 184rpx;
        height: 184rpx;
        border-radius: 16rpx;
      }

      .goods_tu1 {
        width: 98rpx;
        height: 98rpx;
        border-radius: 16rpx;
      }

      .jdt {
        margin-top: 18rpx;
        position: relative;
        align-items: center;

        .jft_box {
          flex: 1;
        }

        .synum {
          margin-left: 10rpx;
          font-size: 18rpx;
          color: #FF4E0D;
        }
      }
    }

    .right_goods_info {
      padding: 0 0 0 20rpx;
      flex: 1;

      .shop_name {
        font-weight: bold;
        color: $zzy-text-color-333333;
        font-size: 32rpx;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .shop_addres {
        align-items: center;
        font-size: 24rpx;
        color: $zzy-text-color-666666;
        margin-bottom: 8rpx;
        display: flex;
        justify-content: space-between;
        image {
          width: 26rpx;
          height: 26rpx;
        }

        .dz {
          flex: 1;
          -webkit-line-clamp: 1;
        }

        .mi {

        }
      }

      .tags_box {
        align-items: center;
        margin-bottom: 0;
      }

      .qiang_Btn {
        position: relative;
        background-color: #FFF1E3;
        align-items: center;
        justify-content: space-between;
        border-radius: 20rpx;
        height: 84rpx;
        margin-top: 40rpx;

        .yj {
          position: absolute;
          top: -14rpx;
          left: 20rpx;
          font-size: 20rpx;
          border: 1px solid #FFDCB8;
          border-radius: 200rpx 200rpx 200rpx 0;
          background-color: #ffffff;
          padding: 0 10rpx;
          color: #FF4E0D;
        }

        .price {
          padding: 0 0 0 20rpx;
          color: #FF4E0D;

          text:nth-child(1) {
            font-size: 24rpx;
          }

          text:nth-child(2) {
            font-size: 36rpx;
            margin: 0 4rpx;
            font-weight: bold;
          }

          text:nth-child(3) {
            font-size: 24rpx;
          }
        }

        .qbtn {
          position: relative;
          width: 220rpx;
          height: 84rpx;
          border-radius: 24rpx;
          display: flex;
          align-items: center;

          .btn_bg_color {
            background-color: #FF4E0D;
            width: 150rpx;
            height: 84rpx;
            margin-left: auto;
            border-radius: 0 24rpx 24rpx 0;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 26rpx;

            .qiangzi {
              width: 39.78rpx;
              height: 45.18rpx;
            }
          }

          .qbtn_wrap_box {
            position: absolute;
            top: -30rpx;
            z-index: 9;

            .qbtn_wrap {
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;

              .fanli {
                position: absolute;
                top: 45%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
                color: #51220F;
                text-align: center;

                view:nth-child(1) {
                  font-size: 28rpx;
                  font-weight: bold;

                  span {
                    font-size: 24rpx;
                  }
                }

                view:nth-child(2) {
                  font-size: 24rpx;
                }
              }

              image {
                width: 74px;
                height: 114rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>